<template>
  <div class="icon-select-box" v-resize="changeWidth">
    <el-popover
        :ref="(el) => addPopover(el)"
        placement="bottom"
        :width="bodyWidht"
        popper-class="custom-popper-class"
        trigger="click"
    >
        <div class="popover-body" :style="{width:bodyWidht}">
            <el-scrollbar v-if="iconList.length!=0">
                <div class="svg-icon-box">
                    <svg v-for="(it, itx) in iconList" :key="itx+it" @click="checkIcon(it)" class="icon" aria-hidden="true">
                        <use :xlink:href="'#'+it"></use>
                    </svg>
                </div>
            </el-scrollbar>
            <jvs-empty v-if="iconList.length==0" size="150px" :text="$t('message.empty.null')" textMarginTop="0px"></jvs-empty>
        </div>
        <template #reference>
            <div class="select-icon-content">
                <el-input v-model="iconValue" :style="{width:bodyWidht}" :placeholder="placeholder"></el-input>
                <svg class="svg-icon">
                    <use v-bind:xlink:href="`#${icon}`"></use>
                </svg>
            </div>
        </template>
    </el-popover>

  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  onMounted,
  computed,
  watch,
  getCurrentInstance
} from 'vue' 

import { useRouter } from "vue-router"
import iconList from '@/const/iconfont'
const router = useRouter();
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
const emit = defineEmits(["update:icon"])
const iconValue = ref('')
const props = defineProps({
    icon:{
        type:String,
        default:''
    },
    placeholder: {
        type: String,
        default: ''
    },
    ref:{
        type:String,
        default:'iconSelectRef'
    }
})
watch(()=>[props.icon],()=>{
    iconValue.value = props.icon
})
const iconWidth = ref(0)
const bodyWidht = ref('100%')
const iconPopoverList = ref(new Map())
const addPopover = (el)=>{
  if(el){
    iconPopoverList.value.set(props.ref, el) 
  }
}
function changeWidth({width,height}){
    bodyWidht.value = width+"px"
}
function checkIcon(val){
    emit("update:icon",val)
    iconValue.value = val
    iconPopoverList.value.get(props.ref).hide()
}
</script>
<style lang="scss" scoped>
.icon-select-box{
    width: 100%;
    background: #F5F6F7;
    border-radius: 4px;
    ::v-deep(.el-input){
        .el-input__wrapper{
            background: #F5F6F7 !important;
            box-shadow: none !important;
            &::-webkit-input-placeholder{
                font-size: .875rem;
                color: #6f7588;
                @include SourceHanSansCN-Regular;
            }
        }
    }
   .select-icon-content{
        display: flex;
        align-items: center;
        .svg-icon{
            width: 20px;
            height: 20px;
            margin-right: 14px;
            cursor: pointer;
        }
   }
}
.popover-body{
    height: 250px;
    padding: 12px 0px;
    .svg-icon-box{
        display: grid;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-columns: repeat(10,30px);
        padding: 0px 12px;
        box-sizing: border-box;
        .icon{
            width: 30px;
            height: 30px;
            cursor: pointer;
        }
    }
}
</style>